<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="order">
            <div class="title">订单详情</div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/purchase' }">充值购买</el-breadcrumb-item>
              <el-breadcrumb-item>订单详情</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="content">
              <div class="row">
                <div class="item-6 text-none"></div>
                <div class="item-6 text-right">
                  <h5 class="subtitle">订单号</h5>
                  <p class="order-sn">#{{orderID}}</p>
                  <p class="time">{{time}}</p>
                  <p class="paytype">支付方式：
                    <img src="../assets/wxpay.png" class="wxpay" alt="微信支付">
                  </p>
                </div>
                <div class="table">
                  <el-table
                    :data="tableData"
                    border
                    :header-cell-style="{'background-color': '#f5f5f5',
          'color':'#888',}"
                    style="width: 100%"
                  >
                    <el-table-column prop="productName" label="商品名称"></el-table-column>
                    <el-table-column prop="productPrice" label="单价"></el-table-column>
                    <el-table-column prop="productQty" label="数量"></el-table-column>
                    <el-table-column prop="orderAmount" label="小计"></el-table-column>
                  </el-table>
                </div>
                <div class="total">
                  <p>订单总计：
                    <span class="num total-num">￥{{total}}</span>
                  </p>
                </div>
                <div class="button">
                  <el-button type="primary" size="small" @click="payment">立即支付</el-button>
                </div>
                <div class="panel">感谢您使用闪信提供的相关服务，充值及服务升级会在支付后即时到账。
                  <br>如遇到支付问题，
                  <span class="blue" @click="linkIndex">可以联系我们的售后客服</span>
                </div>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";
export default {
  data() {
    return {
      total: "", //订单总计
      time: "", //下单时间
      orderID: "",
      tableData: []
    };
  },
  created() {
    this.orderID = this.$route.query.orderID;
    this.$ajax
      .get(
        "getSmsProductOrderDetail.ashx?userId=" +
          getCookie("userid") +
          "&token=" +
          getCookie("token") +
          "&orderID=" +
          this.orderID
      )
      .then(res => {
        if (res.data.code == 200) {
          var data = res.data.data.orderList;
          this.tableData = data;

          this.total = data[0].orderAmount;
          this.time = data[0].bookedDate;
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(error => {
        console.log(error);
      });
  },
  methods: {
    payment() {
      if (this.tableData) {
        this.$router.push({
          path: "/wxpay?orderID=" + this.orderID
        });
      }
    },
    // 跳转联系客服
    linkIndex() {
      this.$router.push({
        path: "/index"
      });
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.blue {
  color: #276bff;
  cursor: pointer;
}
.order {
  width: 100%;
  min-height: 100vh;
}
.order .title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.el-breadcrumb {
  padding-bottom: 15px;
}
.content {
  width: 100%;
  background: #fff;
  padding: 20px;
  display: table;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.row {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.row .item-6 {
  width: 50%;
  position: relative;
  padding-left: 1.25rem;
  float: left;
}
.row .item-6.text-none {
  display: none;
}
.row .item-6.text-right {
  float: right;
  text-align: right;
}
.row .item-6 .subtitle {
  font-size: 16px;
  color: #333;
  margin-bottom: 10px;
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 12px;
}
.row .item-6 .order-sn {
  font-size: 20px;
  color: #578cff;
  margin-bottom: 5px;
}
.row .item-6 .time {
  color: #666;
  margin-bottom: 10px;
  font-size: 12px;
}
.row .item-6 .paytype {
  font-family: inherit;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.6;
  margin-bottom: 15px;
  text-rendering: optimizeLegibility;
}
.row .item-6 .paytype .wxpay {
  display: inline-block;
  height: 36px;
  line-height: 200px;
  width: 110px;
  text-align: center;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  vertical-align: middle;
}
.total {
  padding: 15px 0;
}
.total p {
  margin-bottom: 0;
  font-weight: 700;
  line-height: 33px;
  text-align: right;
}
.total .total-num {
  color: #ff4545;
  font-weight: 700;
  font-size: 22px;
  text-align: right;
}
.total .num {
  display: inline-block;
  width: 200px;
  border-bottom: 1px solid #ddd;
}
.button {
  text-align: right;
  padding: 20px 0;
}
.panel {
  font-size: 12px;
  text-align: left;
  line-height: 20px;
  border-radius: 3px;
  border-style: solid;
  border-width: 1px;
  border-color: #d8d8d8;
  margin-bottom: 0;
  padding: 15px;
  background: #f5f8ff;
  color: #333;
}
</style>
